<template>
  <div id="app">
    <Tabbar v-show="isShowLogo"><img src="static/img/49f5b9e59873ef1c761ff31909.jpg" alt="" style="height:0.38rem"></Tabbar>
    <Tabbar v-show="isShowNav">{{kindName}}</Tabbar>
    <Stabbar v-show="isShowSnav"></Stabbar>
    <transition name="menu">
      <Menu v-if="isShowMenu"></Menu>
    </transition>

    <router-view/>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data: function () {
      return {
        isShowLogo: true,
        kindName: "",
        isShowNav:false,
        isShowSnav:false
      }

    },
    name: 'app',
    computed: {
      ...mapState([
        "isShowMenu",
        "path"
      ])
    },
    mounted: function () {
      var path = {};
      var n = this.$route.path.split('/').length - 1;
      if (n == 1) {
        path.count = true;
      } else {
        path.count = false;
      }
      path.now = this.$route.path;
      this.isShowLogo=(path.now=='/'?true:false);
      this.isShowNav=((n==1&&!this.isShowLogo)?true:false);
      this.isShowSnav=(n==2);

      switch (path.now) {
        case "/hotel":
          this.kindName = "长隆酒店自由行套餐！"
          break;
        case "/park":
          this.kindName = "长隆乐园，欢乐无限！"
          break;
      }
      this.$store.commit("setPath", path);
    },
    watch: {
      $route: function (n, o) {
        var path = {};
        var nC = n.path.split('/').length - 1;
        var oC = o.path.split("/").length - 1;
        if (nC == 1) {
          path.count = true;
        } else {
          path.count = false;
        }
        if (nC > oC) {
          path.to = 1;
          path.aniType = "pagein";
        } else if (nC < oC) {
          path.to = -1;
          path.aniType = "pageout";
        } else {
          path.to = 0;
          path.aniType = "";
        }
        path.now = n.path;
        path.before = o.path;
         this.isShowLogo=(path.now=='/'?true:false);
       this.isShowNav=((nC==1&&!this.isShowLogo)?true:false);
       this.isShowSnav=(nC==2);

         switch (path.now) {
        case "/hotel":
          this.kindName = "长隆酒店自由行套餐！"
          break;
        case "/park":
          this.kindName = "长隆乐园，欢乐无限！"
          break;
      }
        this.$store.commit("setPath", path);
      }

    },
  }

</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.2rem;
  }

  .menu-enter,
  .animenuEdit-leave-to {
    opacity: 0;
    /*height: 0 !important;*/
    transform: translateX(-100%);
  }

  .menu-enter-active {
    transition: all 0.6s;
  }

  .menu-leave-active {
    transition: all 0.6s;
  }

  .menu-enter-to,
  {
    opacity: 1;
    /*height: 75vh !important;*/
    transform: translateX(0);
  }

  .menu-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }
</style>